<template>
	<div>
		<div class="top">
			<ul>
				<li v-for="(item,index) in datas" :key="index">
					<div class="left">
						<img src="../../public/img/header0.png" alt="">
					</div>
					<div class="right">
						<p>{{item.username}}<span class="p1">{{item.rated_at}}</span></p>
						<p><img src="../../public/img/xing.png" alt="">{{item.time_spent_desc}}</p>
						<div class="right_s">
							<div v-for="(aaa,index) in item.item_ratings" :key="index">
								<!-- <img :src="'https://fuss10.elemecdn.com/'+aaa.image_hash+'.jpeg'" alt=""> -->
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				datas:[],
			}
		},
		created() {
			this.$axios({
				url:'https://elm.cangdu.org/ugc/v2/restaurants/'+this.$route.query.id+'/ratings?offset=0&limit=10',
				method:'get',
			}).then(res=>{
				this.datas=res.data;
				window.console.log(res.data);
			})
		}
	}
</script>

<style scoped>
	ul li{
		padding: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}
	.left{
		width: 10%;
		box-sizing: border-box;
		float: left;
	}
	.left img{
		width: 100%;
	}
	.right{
		width: 88%;
		margin-left: 2%;
		float: left;
	}
	.p1{
		float: right;
	}
	.right p{
		vertical-align: middle;
	}
	.right p img{
		vertical-align: middle;
	}
	.right_s img{
		width: 70px;
		height: 70px;
	}
</style>
